/**
 * 拖拽调整大小的 Hook
 */

import { useState, useCallback, useEffect, RefObject } from 'react';

interface ResizeOptions {
  minWidth?: number;
  maxWidth?: number;
  minHeight?: number;
  maxHeight?: number;
  defaultWidth?: number;
  defaultHeight?: number;
  elementRef?: RefObject<HTMLElement>;
}

export const useResize = (options: ResizeOptions = {}) => {
  const {
    minWidth = 380,
    maxWidth = 800,
    minHeight = 500,
    maxHeight = window.innerHeight - 120,
    defaultWidth = 380,
    defaultHeight = 720,
    elementRef,
  } = options;

  const [size, setSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  const [isResizing, setIsResizing] = useState(false);
  const [resizeDirection, setResizeDirection] = useState<string | null>(null);

  const handleMouseDown = useCallback(
    (direction: string) => (e: React.MouseEvent) => {
      e.preventDefault();
      setIsResizing(true);
      setResizeDirection(direction);
    },
    []
  );

  useEffect(() => {
    if (!isResizing) return;

    // 创建全屏遮罩层防止鼠标事件被其他元素干扰
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.right = '0';
    overlay.style.bottom = '0';
    overlay.style.zIndex = '9997';
    overlay.style.cursor = resizeDirection?.indexOf('left') !== -1 || resizeDirection?.indexOf('right') !== -1
      ? 'ew-resize'
      : 'ns-resize';
    overlay.style.userSelect = 'none';
    document.body.appendChild(overlay);

    const handleMouseMove = (e: MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();

      if (!resizeDirection) return;

      const element = elementRef?.current;
      if (!element) return;

      const dialogRect = element.getBoundingClientRect();

      if (resizeDirection.indexOf('left') !== -1) {
        const deltaX = dialogRect.right - e.clientX;
        const newWidth = Math.max(minWidth, Math.min(maxWidth, deltaX));
        setSize((prev) => ({ ...prev, width: newWidth }));
      }

      if (resizeDirection.indexOf('right') !== -1) {
        const deltaX = e.clientX - dialogRect.left;
        const newWidth = Math.max(minWidth, Math.min(maxWidth, deltaX));
        setSize((prev) => ({ ...prev, width: newWidth }));
      }

      if (resizeDirection.indexOf('top') !== -1) {
        const deltaY = dialogRect.bottom - e.clientY;
        const newHeight = Math.max(minHeight, Math.min(maxHeight, deltaY));
        setSize((prev) => ({ ...prev, height: newHeight }));
      }

      if (resizeDirection.indexOf('bottom') !== -1) {
        const deltaY = e.clientY - dialogRect.top;
        const newHeight = Math.max(minHeight, Math.min(maxHeight, deltaY));
        setSize((prev) => ({ ...prev, height: newHeight }));
      }
    };

    const handleMouseUp = () => {
      setIsResizing(false);
      setResizeDirection(null);
      // 移除遮罩层
      if (overlay.parentNode) {
        overlay.parentNode.removeChild(overlay);
      }
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      // 清理遮罩层
      if (overlay.parentNode) {
        overlay.parentNode.removeChild(overlay);
      }
    };
  }, [isResizing, resizeDirection, minWidth, maxWidth, minHeight, maxHeight, elementRef]);

  return {
    size,
    handleMouseDown,
    isResizing,
  };
};
